<template>
    <div class="address-container">
      <el-select v-show="inputNumShow>=1" v-model="provinceData" clearable @change="provinceChange" filterable placeholder="请选择省">
        <el-option v-for="item in provinceDataOpt" :key="item.n" :label="item.n" :value="item.n"></el-option>
      </el-select>
      <el-select :style="{marginLeft:inputInterval+'px'}" v-show="inputNumShow>=2" clearable no-data-text="请选择上级" v-model="cityData" @change="cityChange"
        filterable placeholder="请选择市">
        <el-option v-for="item in cityDataOpt" :key="item.n" :label="item.n" :value="item.n"></el-option>
      </el-select>
      <el-select :style="{marginLeft:inputInterval+'px'}" v-show="inputNumShow>=3" clearable no-data-text="请选择上级" @change="areaChange" v-model="areaData"
        filterable placeholder="请选择区县">
        <el-option v-for="item in areaDataOpt" :key="item.n" :label="item.n" :value="item.n"></el-option>
      </el-select>
      <el-select :style="{marginLeft:inputInterval+'px'}"  @change="streetChange" v-show="inputNumShow>=4"  clearable no-data-text="请选择上级" v-model="streetData"
        filterable placeholder="请选择城镇村">
        <el-option v-for="item in streetDataOpt" :key="item.n" :label="item.n" :value="item.n"></el-option>
      </el-select>
    </div>
  </template>
  <script>
  /**
   * addressData为省市区的数据,获取地址为:https://xiangyuecn.github.io/AreaCity-JsSpider-StatsGov/
   * addressData参数说明:
   *    n:名称
   *    y:名称前缀
   *    c:子集
   */
  import addressData from "./area_format_object.json"; //全国省市区街道数据
  export default {
    name: "hsk-addressSel",
    props:{
      inputNumShow:{
        type:Number,
        default:4,
      },
      inputInterval:{
        type:Number,
        default:10
      },
      defaultAddress:{
        type:Array,
        default(){
          return []
        }
      },
      addressShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        provinceData: undefined,
        cityData: undefined,
        areaData: undefined,
        streetData: undefined,
        provinceDataOpt: [],//  省,自治区，直辖市，特别行政区都在其中
        cityDataOpt: [], //  市数据
        areaDataOpt: [],// 区数据
        streetDataOpt: [], //城镇
        sourceData: null,
      }
    },
    watch: {
      defaultAddress: {
        deep: true,
        handler(newValue) {
          this.processDefaultAddress(newValue)
        },
        immediate: true,
      }
    },
    created() {
      //省市区镇数据处理,将省市区镇数据分离出来
      this.dataProces()
      this.processDefaultAddress(this.defaultAddress)
    },
    methods: {
      //数据初始化处理
      dataProces() {
        //初始化
        this.provinceDataOpt = []
        this.cityDataOpt = []
        this.areaDataOpt = []
        this.streetDataOpt = []
        this.sourceData = undefined
        this.cityData = undefined
        this.areaData = undefined
        this.streetData = undefined
        this.sourceData = addressData
        //递归，为每层添加level，区分省，市，县，镇,并将数据放入指定变量中使用
        this.addLevel(this.sourceData)
      },
      /**
       * 递归为每个层级添加一个level
       * 0.（省,自治区,直辖市,特别行政区）、
       * 1.（市，直辖市，特别行政区）、
       * 2.（区，县，镇）、
       * 3. （城，镇，街道）、
       * 将省市区城镇放入到指定的provinceData，cityData，areaData，streetData
       */
      addLevel(data, level = 0) {
        for (const key in data) {
          if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
            data[key].level = level;
            if (level === 0) {
              this.provinceDataOpt.push(data[key])
            }
            if ('c' in data[key]) {
              this.addLevel(data[key].c, level + 1);
            }
          }
        }
      },
      /**
       * 当省份改变选中时触发,获取市，直辖市，行政区，自治区
       */
       provinceInfo(e) {
        this.cityDataOpt = []
        this.cityData = undefined
        this.areaData = undefined
        this.areaDataOpt = []
        this.streetData = undefined
        this.streetDataOpt = []
        //根据选中项确定市，直辖市，或者特别行政区的数据
        for (let i = 0; i < this.provinceDataOpt.length; i++) {
          if (e === this.provinceDataOpt[i].n) {
            //获取市的内容放入市区数组
            for (let j in this.provinceDataOpt[i].c) {
              //获取市，直辖市，行政区，自治区
              this.cityDataOpt.push(this.provinceDataOpt[i].c[j])
            }
          }
        }
       },
       provinceChange(e) {
        this.provinceInfo(e)
        
        this.$emit("addressChange",[this.provinceData])
      },
      /**
       * 当市区修改的时候触发，获取县，区
       */
       cityInfo(e) {
        this.areaData = undefined
        this.areaDataOpt = []
        this.streetData = undefined
        this.streetDataOpt = []
        // 拿到县区选项
        for (let i = 0; i < this.cityDataOpt.length; i++) {
          if (e === this.cityDataOpt[i].n) {
            for (let j in this.cityDataOpt[i].c) {
              this.areaDataOpt.push(this.cityDataOpt[i].c[j])
            }
          }
        }
       },
      cityChange(e) {
        this.cityInfo(e)
        this.$emit("addressChange",[this.provinceData,this.cityData])
      },
      /**
       * 当前区县修改时触发，获取城镇选项列表
       */
      areaInfo(e){
        this.streetData = undefined
        this.streetDataOpt = []
         // 拿到城镇庄村选项
         for (let i = 0; i < this.areaDataOpt.length; i++) {
          if (e === this.areaDataOpt[i].n) {
            for (let j in this.areaDataOpt[i].c) {
              this.streetDataOpt.push(this.areaDataOpt[i].c[j])
            }
          }
        }
      },
      areaChange(e) {
        this.areaInfo(e)
        this.$emit("addressChange",[this.provinceData,this.cityData,this.areaData])
      },
      streetChange(e){
        this.$emit("addressChange",[this.provinceData,this.cityData,this.areaData,e])
      },
      processDefaultAddress (val) {
        if (!val || val.length === 0) {
          this.provinceData = undefined
          this.cityData = undefined
          this.areaData = undefined
          this.streetData = undefined
          return
        }
        if(val.length > 0 && typeof(val[0]) !== "undefined"){
          this.provinceData = val[0]
          if (this.addressShow) {
            this.provinceInfo(val[0])
          } else {
            this.provinceChange(val[0])
          }
        }
        if(val.length > 0 && typeof(val[1]) !== "undefined"){
          this.cityData = val[1]
          if (this.addressShow) {
            this.cityInfo(val[1])
          } else {
            this.cityChange(val[1])
          }
        }
        if(val.length > 0 && typeof(val[2]) !== "undefined"){
          this.areaData = val[2]
          if (this.addressShow) {
            this.areaInfo(val[2])
          } else {
            this.areaChange(val[2])
          }
        }
        if(val.length > 0 && typeof(val[3]) !== "undefined"){
          this.streetData = val[3]
          if (this.addressShow) return;
          this.streetChange(val[3])
        }
      }
    }

  }
  </script>

  <style scoped>
  .el-select {
    width: 88px;
  }
</style>
